import React, { Component } from "react";

export default class JSXInDepth extends Component{
   render(){
       return <JSXInDepthComponent name={"JSX In Depth"} action={"render jsx"} summary={"jsx is the creatation of react team of facebook!"}/>
   } 
}

class JSXInDepthComponent extends Component {

    render() {
        return <React.Fragment>
            <h1>{this.props.name}</h1>
            <h2>{this.props.action}</h2>
            <h2>{this.props.summary}</h2>
            <SubComponet {...this.props} />
        </React.Fragment>
    }
}

function SubComponet(props) {
    return <React.Fragment>
        <h1 style={{ color: 'red' }}>{props.name}</h1>
        <h2 style={{ color: 'red' }}>{props.action}</h2>
        <h2 style={{ color: 'red' }}>{props.summary}</h2>
    </React.Fragment>
}